<template>
	<view>
		<template v-if="resultList.length === 0">
			<!-- 搜索历史 -->
			<view class="py-2 font-md px-2">搜索历史</view>
			<view class="flex flex-wrap">
				<view 
				class="border rounded font mx-2 my-1 px-2"
				hover-class="bg-light"
				v-for="(item, index) in list" 
				:key="index"
				@click="handleSearchHistory(item)">
					{{ item }}
				</view>
			</view>
		</template>
		<template v-else>
			<!-- 数据列表 -->
			<block v-for="(item,index) in resultList" :key="index">
				<common-list :item="item" :index="index"></common-list>
			</block>
		</template>
	</view>
</template>
<script>
	const demo = [
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "/static/demo/datapic/11.jpg",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "support",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		},
		{
			//用户昵称
			username: "昵称",
			//用户头像
			userpic: "/static/default.jpg",
			//发布时间
			newstime: "2022-05-26 下午04:30",
			//是否关注
			isFollow: false,
			//标题
			title: "我是标题",
			//封面图
			titlepic: "",
			//顶和踩
			support: {
				//类型：顶/踩
				type: "unsupport",
				//顶的人数
				support_count: 1,
				//踩的人数
				unsupport_count: 2
			},
			//评论人数
			comment_count: 0,
			//分享次数
			share_num: 2
		}
	]
	//引入列表组件
	import commonList from '@/components/common/common-list.vue';
	export default {
		components: {
			commonList
		},
		data() {
			return {
				//搜索值
				searchText: '',
				//搜索历史
				list: [
					'uniapp第二季商城类实战开发',
					'uni-app第三季仿微信实战开发',
					'实战教程',
					'系列教程'
				],
				//结果列表
				resultList: []
			}
		},
		//监听原生标题栏搜索输入框输入内容变化
		onNavigationBarSearchInputChanged(e) {
			this.searchText = e.text;
		},
		//监听原生标题栏按钮点击事件
		onNavigationBarButtonTap(e) {
			if(e.index === 0) {
				this.searchEvent();
			}
		},
		methods: {
			//点击搜素历史
			handleSearchHistory(text) {
				this.searchText = text;
				this.searchEvent();
			},
			//搜索事件
			searchEvent() {
				//收起键盘
				uni.hideKeyboard();
				//加载动画显示
				uni.showLoading({
					title: '加载中...',
					mask: false
				})
				//请求搜素
				setTimeout(() => {
					this.resultList = demo;
					//隐藏加载动画
					uni.hideLoading();
				}, 3000)
			}
		}
	}
</script>

<style>

</style>
